﻿#include("../../layout/header.html")
#@layout()
#define content()
<head>
    <style>
        /* 左树 */
        #organizationTreeBar {
            padding: 10px 15px;
            border: 1px solid #e6e6e6;
            background-color: #f2f2f2;
        }

        #organizationTree {
            border: 1px solid #e6e6e6;
            border-top: none;
            padding: 10px 5px;
            overflow: auto;
            height: -webkit-calc(100vh - 125px);
            height: -moz-calc(100vh - 125px);
            height: calc(100vh - 125px);
        }

        .layui-tree-entry .layui-tree-txt {
            padding: 0 5px;
            border: 1px transparent solid;
            text-decoration: none !important;
            color: #1e9fff ;
        }

        .layui-tree-entry.ew-tree-click .layui-tree-txt {
            background-color: #fff3e0;
            border: 1px #FFE6B0 solid;
        }

        /* 右表搜索表单 */
        #organizationUserTbSearchForm .layui-form-label {
            box-sizing: border-box !important;
            width: 90px !important;
        }

        #organizationUserTbSearchForm .layui-input-block {
            margin-left: 90px !important;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 10px;">
                    <!-- 树工具栏 -->
                    <div class="layui-form toolbar layui-hide" id="organizationTreeBar">
                        <button id="organizationAddBtn" class="layui-btn layui-btn-sm icon-btn">
                            <i class="layui-icon">&#xe654;</i>添加
                        </button>&nbsp;
                        <button id="organizationEditBtn" class="layui-btn layui-btn-sm layui-btn-warm icon-btn">
                            <i class="layui-icon">&#xe642;</i>修改
                        </button>&nbsp;
                        <button id="organizationDelBtn"
                                class="layui-btn layui-btn-sm layui-btn-danger icon-btn">
                            <i class="layui-icon">&#xe640;</i>删除
                        </button>
                    </div>
                    <!-- 左树 -->
                    <div id="organizationTree"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-body">
                    <!-- 表格工具栏 -->
                    <form class="layui-form toolbar" id="organizationUserTbSearchForm">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">关键字:</label>
                                <div class="layui-input-inline">
                                    <input name="searchValue" class="layui-input" placeholder="输入用户名，账号"/>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">角&emsp;色:</label>
                                <div class="layui-input-inline">
                                    <select id="roles" name="roleId">
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">&emsp;
                                <button class="layui-btn icon-btn" lay-filter="userTbSearch" lay-submit>
                                    <i class="layui-icon">&#xe615;</i>搜索
                                </button>
                            </div>
                        </div>
                    </form>
                    <!-- 数据表格 -->
                    <table id="userTable" lay-filter="userTable"></table>
                </div>
            </div>
        </div>
    </div>


</div>

<!-- 表格操作列 -->
<script type="text/html" id="userTbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reset">重置密码</a>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="userTbState">
    <input type="checkbox" lay-filter="userTbStateCk" value="{{d.id}}" lay-skin="switch"
           lay-text="正常|锁定" {{d.state==0?'checked':''}} style="display: none;"/>
    <p style="display: none;">{{d.state==0?'正常':'锁定'}}</p>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="userEditDialog">
    <form id="userEditForm" lay-filter="userEditForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">账号:</label>
            <div class="layui-input-block">
                <input name="username" placeholder="请输入账号" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码:</label>
            <div class="layui-input-block">
                <input name="password" placeholder="请输入密码" class="layui-input" lay-verType="tips"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">真实姓名:</label>
            <div class="layui-input-block">
                <input name="realName" placeholder="请输入真实姓名" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">手机号:</label>
            <div class="layui-input-block">
                <input name="phone" placeholder="请输入手机号" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">部门:</label>
            <div class="layui-input-block">
                <div id="userOrgs"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">角色:</label>
            <div class="layui-input-block">
                <div id="userEditRoleSel"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-block">
                <input name="email" placeholder="请输入邮箱" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item text-right ai-form-footer">
            <button class="layui-btn" lay-filter="userEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin', 'xmSelect','formX','tree','treeTable','notice'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var formX = layui.formX;
        var xmSelect = layui.xmSelect;
        var tree = layui.tree;
        var notice = layui.notice;
        var selObj, treeData;

        /* 渲染表格 */
        var insTb = table.render({
            elem: '#userTable',
            url: '/sys/sysUser/list',
            page: true,
            toolbar: ['<p>',
                '<button lay-event="add" perm-show="user:addOrUpdate" class="layui-btn layui-btn-sm icon-btn layui-hide"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="del" perm-show="user:del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn layui-hide"><i class="layui-icon">&#xe640;</i>删除</button>',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'},
                {type: 'numbers',title: '序号'},
                {field: 'username', title: '账号', sort: true},
                {field: 'realName', title: '用户名', sort: true},
                {field: 'phone', title: '手机号'},
                {field: 'orgName', title: '部门'},
                {
                    field: 'roleName', title: '角色', templet: function (d) {
                        if(!d.roles){
                            return "";
                        }
                        return d.roles.map(function (item) {
                            return '<span class="layui-badge layui-badge-gray">' + item.name + '</span>';
                        }).join('&nbsp;&nbsp;');
                    }, width: 300
                },
                {field: 'state', title: '状态', templet: '#userTbState', sort: true, width: 100},
                {
                    field: 'createTime', title: '创建时间', sort: true
                },

                {title: '操作', toolbar: '#userTbBar', align: 'center', minWidth: 200}
            ]],
            done: function() {
                admin.renderPerm();
            }
        });

        var roles = [],orgs = [];
        admin.req('/sys/sysRole/selectData',{},function (d) {
            if (0 === d.code) {
                roles = d.data;
                formX.renderSelect({
                    elem: '#roles',
                    data: roles,
                    name: 'name',
                    value: 'id',
                    hint: '请选择角色'
                });
            }
        })

        admin.req('/sys/sysOrg/selectData',{},function (d){if(0 === d.code){orgs = d.data;}})

        /* 渲染树形 */
        function renderTree() {
            admin.req('/sys/sysOrg/all', function (res) {
                for (var i = 0; i < res.data.length; i++) {
                    res.data[i].title = res.data[i].name;
                    res.data[i].id = res.data[i].id;
                    res.data[i].spread = true;
                }
                treeData = layui.treeTable.pidToChildren(res.data, 'id', 'pid');
                tree.render({
                    elem: '#organizationTree',
                    onlyIconControl: true,
                    data: treeData,
                    click: function (obj) {
                        selObj = obj;
                        $('#organizationTree').find('.ew-tree-click').removeClass('ew-tree-click');
                        $(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
                        insTb.reload({
                            where: {orgId: obj.data.id},
                            page: {curr: 1},
                            url: '/sys/sysUser/list'
                        });
                    }
                });
                // $('#organizationTree').find('.layui-tree-entry:first>.layui-tree-main>.layui-tree-txt').trigger('click');
            });
        }

        renderTree();


        /* 表格搜索 */
        form.on('submit(userTbSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(userTable)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showEditModel(obj.data);
            } else if (obj.event === 'del') { // 删除
                doDel(obj);
            } else if (obj.event === 'reset') { // 重置密码
                resetPsw(obj);
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(userTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                showEditModel();
            } else if (obj.event === 'del') { // 删除
                var checkRows = table.checkStatus('userTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 2});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                doDel({ids: ids});
            }
        });

        /* 显示表单弹窗 */
        function showEditModel(mData) {
            admin.popupRight({
                type: 1,
                title: (mData ? '修改' : '添加') + '用户',
                content: $('#userEditDialog').html(),
                success: function (layero, dIndex) {
                    // 渲染多选下拉框
                    var insRoleSel = formX.renderMultiSelect({el:'#userEditRoleSel',name:'userEditRoleSel',value:'id',data:roles})
                    var insOrgSel = formX.renderTreeSelect({el:'#userOrgs',name:'orgId',data:orgs});

                    //这里因为列表数据有加密的字段 所以单独请求接口
                    if(mData){
                        admin.req('/sys/sysUser/info',{id:mData.id},function (res) {
                            if(res.code === 0){
                                mData.phone = res.data.phone;
                                // 回显表单数据
                                form.val('userEditForm', mData);
                                insOrgSel.setValue([mData.orgId])
                                // 回显选中角色
                                if (mData && mData.roles) {
                                    insRoleSel.setValue(mData.roles.map(function (item) {
                                        return item.id;
                                    }));
                                }
                            }
                        })
                    }
                    // 表单提交事件
                    form.on('submit(userEditSubmit)', function (data) {
                        data.field.roleIds = insRoleSel.getValue('valueStr');
                        var loadIndex = layer.load(2);
                        admin.post('/sys/sysUser/add', data.field, function (res) {  // 实际项目这里url可以是mData?'user/update':'user/add'
                            layer.close(loadIndex);
                            if (res.code === 0) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({page: {curr: 1}});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        });
                        return false;
                    });


                    // 禁止弹窗出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                admin.req('/sys/sysUser/del', {
                    id: obj.data ? obj.data.id : '',
                    ids: obj.ids ? obj.ids.join(',') : ''
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 0) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                });
            });
        }

        /* 修改用户状态 */
        form.on('switch(userTbStateCk)', function (obj) {
            var loadIndex = layer.load(2);
            console.log(obj)
            admin.req('/sys/sysUser/updateUserState', {
                userId: obj.elem.value,
                state: obj.elem.checked ? 0 : 1
            }, function (res) {
                layer.close(loadIndex);
                if (res.code === 0) {
                    layer.msg(res.msg, {icon: 1});
                } else {
                    layer.msg(res.msg, {icon: 2});
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            });
        });

        /* 重置密码 */
        function resetPsw(obj) {
            layer.confirm('确定要重置“' + obj.data.realName + '”的登录密码吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                admin.req('/sys/sysUser/resetPsw', {
                    userId: obj.data.id
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 0) {
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                });
            });
        }

    });
</script>
</body>
#end
